import * as React from "react"
import { Metadata } from "next"
import { type SearchParams } from "@/types/table"
import { getValidFilters } from "@/lib/data-table"
import { Shell } from "@/components/shell"
import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"
import { HelpCircle } from "lucide-react"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"

import { getDefaultEvaluationYear, searchParamsEvaluationTargetsCache } from "@/lib/evaluation-target-list/validation"
import { getEvaluationTargets } from "@/lib/evaluation-target-list/service"
import { EvaluationTargetsTable } from "@/lib/evaluation-target-list/table/evaluation-target-table"

export const metadata: Metadata = {
  title: "협력업체 평가 대상 관리",
  description: "협력업체 평가 대상을 확정하고 담당자를 지정합니다.",
}

interface EvaluationTargetsPageProps {
  searchParams: Promise<SearchParams>
}



export default async function EvaluationTargetsPage(props: EvaluationTargetsPageProps) {
  const searchParams = await props.searchParams
  const search = searchParamsEvaluationTargetsCache.parse(searchParams)
  const validFilters = getValidFilters(search.filters)

  // 기본 필터 처리 (통일된 이름 사용)
  let basicFilters = []
  if (search.basicFilters && search.basicFilters.length > 0) {
    basicFilters = search.basicFilters
    console.log("Using search.basicFilters:", basicFilters);
  } else {
    console.log("No basic filters found");
  }

  // 모든 필터를 합쳐서 처리
  const allFilters = [...validFilters, ...basicFilters]
     
  // 조인 연산자도 통일된 이름 사용
  const joinOperator = search.basicJoinOperator || search.joinOperator || 'and';

  // 현재 평가년도 (필터에서 가져오거나 기본값 사용)
  const currentEvaluationYear = search.evaluationYear || getDefaultEvaluationYear()

  // Promise.all로 감싸서 전달
  const promises = Promise.all([
    getEvaluationTargets({
      ...search,
      filters: allFilters,
      joinOperator,
    })
  ])

  return (
    <Shell className="gap-4">
      {/* 간소화된 헤더 */}
      <div className="flex items-center justify-between space-y-2">
        <div className="flex items-center justify-between space-y-2">
          <div className="flex items-center gap-2">
            <h2 className="text-2xl font-bold tracking-tight">
              협력업체 평가 대상 관리
            </h2>
            <Badge variant="outline" className="text-sm">
              {currentEvaluationYear}년도
            </Badge>
       
          </div>
        </div>
      </div>
             
      {/* 메인 테이블 (통계는 테이블 내부로 이동) */}
      <React.Suspense 
        key={JSON.stringify(searchParams)} // URL 파라미터가 변경될 때마다 강제 리렌더링
        fallback={
          <DataTableSkeleton
            columnCount={12}
            searchableColumnCount={2}
            filterableColumnCount={6}
            cellWidths={[
              "3rem",   // checkbox
              "5rem",   // 평가년도
              "4rem",   // 구분
              "8rem",   // 벤더코드
              "12rem",  // 벤더명
              "4rem",   // 내외자
              "6rem",   // 자재구분
              "5rem",   // 상태
              "5rem",   // 의견일치
              "8rem",   // 담당자현황
              "10rem",  // 관리자의견
              "8rem"    // actions
            ]}
            shrinkZero
          />
        }
      >
        {currentEvaluationYear &&
        <EvaluationTargetsTable 
          promises={promises} 
          evaluationYear={currentEvaluationYear}
        />
}
      </React.Suspense>
    </Shell>
  )
}